import React, {CSSProperties} from 'react'
import {inject,observer} from 'mobx-react'
import CartStore from "../../../store/modules/cartStore";
import EmptyCart from "../EmptyCart/EmptyCart";
import CartItem from './CartItem/CartItem'

const ListStyle: CSSProperties = {
    display: 'flex',
    flexFlow: 'column nowrap',
}
interface IProps {
    cartStore?: CartStore
}
const CartList = (props: IProps) => {
    React.useEffect(() => {
        props.cartStore?.getUserCart()
    },[ ]) // eslint-disable-line react-hooks/exhaustive-deps
    return (
        <div>
            {
                props?.cartStore?.cartList.length === 0 ? <EmptyCart info='您的购物车为空' action='去逛一逛' link='/home' img="assets/picsrc/empty.png"/> :
                    (
                        <>
                            <div style={ListStyle}>
                                {
                                    props.cartStore?.cartList.map(item => {
                                        return (
                                            <CartItem key={item.cid} goodInfo={item}/>
                                        )
                                    })
                                }
                            </div>
                        </>
                    )
            }
        </div>
    )
}

export default inject('cartStore')(observer(CartList))